<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html class="site-html">
<head>
    <meta charset="utf-8"/>
    <title>车辆轨迹回放</title>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=7d24e3c0b1de00fcfc07dcb16ac3a087"></script>
    <script type="text/javascript">
        var requireExtraPaths = {
            extrance: '../../../common_js/carAnaCarTrack',
            file1: '../../../component/map/js/map-gaode-trackreplay',
            file2: '../../../component/jquery-ui/ui/slider.min'
        };

        var requireExtraShim = {
            file2: {
                deps: ['jquery-ui']
            }
        };
        var cssFileLoadArr = ['/content/css/sub/carAnaCarTrack.css'];
    </script>
    <jsp:include flush="true" page="../base/base.jsp"></jsp:include>
</head>
<body class="video-replay-box">
<div class="fault-box fault-box-hide">
    <a class="slide-btn2 slide-btn2-show"></a>
    <div class="table-container">
        <table width="100%" >
            <tr>
                <th width="50%" class="al pl10 c-red">故障类型</th>
                <th>时间</th>
            </tr>
        </table>
        <div class="td-box pt5">
            <table width="100%" id="faultType">

            </table>
        </div>
    </div>

    <div class="table-container">

        <table width="100%">
            <tr>
                <th width="50%" class="al pl10 c-yellow2 pt0">不安全行为</th>
                <th class="pt0">时间</th>
            </tr>
        </table>
        <div class="td-box pt5">
            <table width="100%" id="unSafeBeh">
            </table>
        </div>
    </div>
</div>
<div id="iCenter" style="height: 50%;width:100%;border: 1px solid #E8E8E8;box-sizing: border-box;">

</div>

<div class="control-panel">
    <a class="slide-btn slide-btn-active" id="updown"></a>

    <div class="control-area clearfix">
        <a class="video-btn start" id="play"></a>
        <a class="video-btn stop" id="stop"></a>
        <a class="video-btn quick-prev" id="back"></a>

        <div class="time-line" id="slider" style="position: relative;opacity:1;">
            <%--<div class="already-line" style="width:100px;"></div>--%>
            <%--<div class="already-play">--%>
            <%--<div class="time-area">2:20</div>--%>
            <%--</div>--%>
        </div>
        <a class="video-btn quick-next" id="forward"></a>

        <div class="form-area">
            <label>开始时间</label>
            <input type="text" id="trajBeginTime" readonly="true"
                   onclick="WdatePicker({isShowClear:false,dateFmt:'yyyy-MM-dd HH:00:00'})">
            <label>持续时长</label>
            <select id="lastingTime"
                    style="width:50px;height: 25px;line-height: 25px;float: left;margin-left: 5px;margin-top: 5px;">
                <option value='15' selected="selected">15</option>
                <option value='30'>30</option>
                <option value='45'>45</option>
                <option value='60'>60</option>
            </select>
            <label class="ml5">分钟</label>
        </div>
        <a class="btn btn-save" id="trajSearchBnt">查询</a>
    </div>
</div>

<div style="display: none;" id="bottom">
    <div class="ui-jqgrid-2" id="ui-jqgrid-2" style="width: 100%;">
        <table id="djtable"></table>
    </div>
</div>
</body>
</html>